<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlowZone - 动态交互风格</title>
    <link rel="icon" type="image/png" href="../../../icons/icon_32_32.png">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #1a1a1a;
            color: #ffffff;
            overflow-x: hidden;
        }
        .cursor {
            width: 20px;
            height: 20px;
            border: 2px solid #fff;
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
            transition: transform 0.2s;
        }
        .cursor.hover {
            transform: scale(1.5);
            background: rgba(255,255,255,0.1);
        }
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .hero-content {
            text-align: center;
            z-index: 1;
        }
        .logo-container {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto 2rem;
            cursor: pointer;
        }
        .logo {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
        }
        .logo-container:hover .logo {
            transform: scale(1.1);
        }
        .logo-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        .particle {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            pointer-events: none;
        }
        h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
        }
        h1::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 0;
            height: 3px;
            background: #fff;
            transition: width 0.5s ease;
        }
        h1:hover::after {
            width: 100%;
        }
        .features {
            padding: 6rem 2rem;
            position: relative;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        .feature-card {
            background: rgba(255,255,255,0.05);
            border-radius: 20px;
            padding: 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }
        .feature-card:hover::before {
            transform: translateX(100%);
        }
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            transition: transform 0.3s ease;
        }
        .feature-card:hover .feature-icon {
            transform: scale(1.2);
        }
        .magnetic-button {
            display: inline-block;
            padding: 1.5rem 4rem;
            background: #fff;
            color: #000;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            font-size: 1.2rem;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .magnetic-button:hover {
            transform: scale(1.05);
        }
        .canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <div class="cursor"></div>
    <div class="canvas-container">
        <canvas id="bgCanvas"></canvas>
    </div>

    <div class="hero">
        <div class="hero-content">
            <div class="logo-container" id="logoContainer">
                <img src="../../../icons/icon_128_128.png" alt="FlowZone Logo" class="logo">
                <div class="logo-particles"></div>
            </div>
            <h1>FlowZone</h1>
            <p style="font-size: 1.5rem; margin-bottom: 3rem;">互动体验的极致呈现</p>
        </div>
    </div>

    <div class="features">
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">🎯</div>
                <h3>动态响应</h3>
                <p>实时反馈的交互体验</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <h3>流畅操作</h3>
                <p>丝滑般的使用体验</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">✨</div>
                <h3>视觉反馈</h3>
                <p>精心设计的动效系统</p>
            </div>
        </div>
    </div>

    <div style="text-align: center; padding: 6rem 2rem;">
        <div class="magnetic-button">立即体验</div>
    </div>

    <script>
        // 自定义光标
        const cursor = document.querySelector('.cursor');
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
        });

        document.querySelectorAll('a, button, .feature-card, .logo-container, .magnetic-button').forEach(el => {
            el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
            el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
        });

        // Logo粒子效果
        const logoContainer = document.getElementById('logoContainer');
        function createParticles() {
            const particles = document.querySelector('.logo-particles');
            particles.innerHTML = '';
            for(let i = 0; i < 20; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.width = Math.random() * 4 + 2 + 'px';
                particle.style.height = particle.style.width;
                particles.appendChild(particle);
            }
        }

        logoContainer.addEventListener('mousemove', (e) => {
            const particles = document.querySelectorAll('.particle');
            const rect = logoContainer.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            particles.forEach((particle, i) => {
                const angle = (i / particles.length) * Math.PI * 2;
                const distance = 30 + Math.random() * 20;
                const targetX = x + Math.cos(angle) * distance;
                const targetY = y + Math.sin(angle) * distance;

                particle.style.left = targetX + 'px';
                particle.style.top = targetY + 'px';
                particle.style.transition = 'all 0.3s ease';
            });
        });

        createParticles();

        // 磁性按钮效果
        const magneticButton = document.querySelector('.magnetic-button');
        magneticButton.addEventListener('mousemove', (e) => {
            const rect = magneticButton.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;
            
            magneticButton.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px) scale(1.05)`;
        });

        magneticButton.addEventListener('mouseleave', () => {
            magneticButton.style.transform = '';
        });

        // 动态背景
        const canvas = document.getElementById('bgCanvas');
        const ctx = canvas.getContext('2d');
        let width = canvas.width = window.innerWidth;
        let height = canvas.height = window.innerHeight;

        const particles = [];
        const particleCount = 100;

        class Particle {
            constructor() {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                this.vx = Math.random() * 2 - 1;
                this.vy = Math.random() * 2 - 1;
                this.radius = Math.random() * 2;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                if(this.x < 0 || this.x > width) this.vx *= -1;
                if(this.y < 0 || this.y > height) this.vy *= -1;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(255,255,255,0.5)';
                ctx.fill();
            }
        }

        for(let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }

        function animate() {
            ctx.clearRect(0, 0, width, height);
            
            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });

            requestAnimationFrame(animate);
        }

        animate();

        window.addEventListener('resize', () => {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>
